<template>
  <div id="app">
    <header class="head">
      <a class="back tl" @click="clickmodl">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">食品名称</small>
      </a>
    </header>
    <main>
      <div class="seachfrom">
        <div class="seachbox">
          <el-input placeholder="请输入内容" v-model="seachtext">
            <el-button slot="append" icon="search" @click='seach()'></el-button>
          </el-input>
        </div>
      </div>
      <div style="height: 568px;overflow-y: auto;">
        <ul class="datalist">
          <li v-for='(item,index) of getPerson' :key="item.unid" @click="foodClick(item.name,item.demandType.unid)">
            <div class="items-img">
              <img src="../assets/iconimg.png" />
            </div>
            <div class="items-text">
              <p>{{item.brand}}</p>
              <p>名称:{{item.name}}</p>
              <p>类别:{{item.demandType.name}}</p>
              <p>规格：{{item.norms}}</p>
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    DemandWarehouseData
  } from '../api/api';
  export default {
    data() {
      return {
          getPerson: [],
          seachtext:'',
          limit: 0,
          seachname:'',
      };
    },
    created() {
    },
    methods: {
        scrollMethod() {
            const sumH = document.body.scrollHeight;
            const viewH = document.documentElement.clientHeight;
            const scrollH = document.body.scrollTop;
            if (viewH + scrollH === sumH) {
                this.DemandWarehouseinfo();
            }
        },
      seach: function() {
        debugger
        this.seachname=this.seachtext
        this.DemandWarehouseinfo();
      },   
     DemandWarehouseinfo: function() {
          this.limit += 10;
        let options = {
          params: {
           names:this.seachname,
           currentPage:1,
           pageSize:this.limit,
          }
        }
        //调取接口
        DemandWarehouseData(options).then((res) => {
          if (res.success === true) {
            this.getPerson = res.data;
          }
        })
      },
      foodClick: function(name,unid) {
        debugger
        this.$emit("listenToChildEvent", {
         name,unid
        });
      },
      clickmodl: function() {
        this.$emit("listencloseclick");
      },
    },
    created(){ this.DemandWarehouseinfo();
    },
    mounted() {
       window.addEventListener('scroll', this.scrollMethod);
     
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  //头部
  body {
    background: #f0f0f0;
  }
  
  a {
    list-style: none;
    text-decoration: none;
  }
  
  header {
    width: 100%;
    height: 45px;
  }
  
  .head {
    background: #008c3f;
    color: #fff;
    line-height: 45px;
    text-align: center;
    font-size: 1.2rem;
    position: relative;
  }
  
  header .head a:nth-child(2) {
    width: 100%;
  }
  
  .font_18 {
    font-size: 18px;
  }
  
  .co_f {
    color: #fff !important;
  }
  
  .back {
    position: absolute;
    top: 0px;
    left: 0px;
    i {
      color: #fff;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
  
  .adds {
    position: absolute;
    top: 0px;
    right: 0px;
    i {
      color: #fff;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
  
  //seachfrom
  .seachfrom {
    background: #f5f5f5;
    padding: 10px 15px;
  }
  
  //list_box
  .datalist {
    width: 100%;
  }
  
  .datalist li {
    border-bottom: 1px solid #d4d4d4;
    padding: 10px;
  }
  
  .datalist li a {
    display: block
  }
  
  .items-img {
    width: 50px;
    height: 50px;
    display: block;
    display: inline-block;
    float: left;
    margin-top: 7px;
  }
  
  .items-img img {
    width: 100%;
    height: 100%;
  }
  
  .items-text {
    margin-left: 60px;
    font-size: 12px;
  }
  
  .items-text p {
    margin: 0px;
  }
</style>
